<template>
  <div class="advertie-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>广告管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/warning_strategy' }"
        >投放策略列表</el-breadcrumb-item
      >
    </el-breadcrumb>
  </div>
  <div class="advertie-content">
    <div class="head">
      提示：为了方便大家更好地推广，活动期间橱窗轮播广告位免费扩展至3个，活动期限至2024年12月31日，如需更多广告位，可在服务市场进行购买，
      <span class="go">点此前往</span>
    </div>
    <!-- 搜索条件 -->
    <div class="search">
      <div class="left">
        <el-input
          placeholder="请输入策略名称"
          style="width: 300px"
          class="margin-r-10"
        ></el-input>
        <el-button round :icon="Search" color="#0071bb">搜索</el-button>
        <el-button round :icon="Plus" color="#0071bb" @click="goAddStrategy()"
          >新建策略</el-button
        >
      </div>
      <div class="right">
        <el-button round :icon="Refresh" style="margin-right: 10px"
          >刷新</el-button
        >
        <el-dropdown :hide-on-click="false">
          <span class="el-dropdown-link">
            <el-button round color="#0071bb" :icon="HelpFilled">筛选</el-button>
          </span>
          <template #dropdown>
            <el-dropdown-menu style="max-height: 300px">
              <el-dropdown-item
                v-for="(item, index) in checkArr"
                :key="index"
                @click.stop="filterTableData(item)"
              >
                <el-checkbox
                  v-model="item.show"
                  size="large"
                  :label="item.label"
                />
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="data-content">
      <!-- 表格数据 -->
      <div class="table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" width="50" label="序号" />
          <!-- 动态表头 -->
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            v-for="(item, index) in headerArr"
            :key="index"
          >
          </el-table-column>
          <el-table-column prop="" label="操作">
            <template #default="scope">
              <el-button
                size="small"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部分页 -->
      <div class="page_number">
        <el-pagination
          v-model:current-page="pager.currentPage"
          v-model:page-size="pager.pageSize"
          :disabled="!pager.total"
          layout="prev, pager, next, jumper,total"
          :total="pager.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 新增广告 -->
    <AddAdvertise
      v-if="show"
      @close="onClose()"
      @submit="onSubmit()"
    ></AddAdvertise>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Search, Plus, Refresh, HelpFilled } from "@element-plus/icons-vue";
import AddAdvertise from "./components/addAdvertise.vue";
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
const router = useRouter();
const tableData = ref<any>([]);
// 是否显示新增弹窗
const show = ref(false);
// 分页
const pager = ref({
  currentPage: 1,
  pageSize: 10,
  total: 10,
});
// 初始化表格数据
const initData = () => {
  tableData.value = [
    {
      id: 1,
      name: "办公大厦",
      time: "2024-04-12",
      deviceNUm: 10,
    },
    {
      id: 2,
      name: "办公大厦",
      time: "2024-04-12",
      deviceNUm: 10,
    },
  ];
};
// 改变pageSize
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
// 改变当前页码 currentPage
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
// 新增
const goAddStrategy = () => {
  router.push("/add_strategy");
};
// 编辑
const handleEdit = (index: number, row: any) => {
  console.log(index, row);
  router.push("/add_strategy");
};
// 删除
const handleDelete = (index: number, row: any) => {
  console.log(index, row);
  ElMessageBox.confirm("你确定要删除?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    show.value = false;
  });
};
// 提交
const onSubmit = () => {
  show.value = false;
};
const onClose = () => {
  show.value = false;
};
// 选中的属性
const checkArr = ref<any>([
  { label: "策略名称", prop: "name", show: true },
  { label: "新建时间", prop: "time", show: true },
  { label: "绑定设备数", prop: "deviceNUm", show: true },
]);
// 表头
const headerArr = ref<any>([
  { label: "策略名称", prop: "name", show: true },
  { label: "新建时间", prop: "time", show: true },
  { label: "绑定设备数", prop: "deviceNUm", show: true },
]);
// 点击触发方法
const filterTableData = (item: any) => {
  setTimeout(() => {
    headerArr.value = checkArr.value.filter((item: any) => item.show == true);
  }, 500);
};
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.advertie-page {
  padding: 20px 10px;
  box-sizing: border-box;
  background-color: #f0f0f0;
}

.advertie-content {
  padding: 10px;

  .head {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background: #215077;
    font-size: 12px;
  }

  .go {
    color: yellow;
  }

  .search {
    width: 100%;
    display: flex;
    padding: 0 20px;
    height: 60px;
    line-height: 60px;
    justify-content: space-between;
  }

  .margin-r-10 {
    margin-right: 10px;
  }

  .right {
    display: flex;
    align-items: center;
  }

  .data-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .table {
    margin-top: 10px;
  }

  .page_number {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
